<script lang="ts" setup>
import { detailflage, updataflageList } from '@fl/api/flagship/flagship'
import FlUpload from '@fl/components/fl-upload.vue'

const route = useRoute()
const companyRef = ref<any>()
type formType = {
    enterprieAbbreviation?: string
    enterprieIntroduction?: string
    enterprieName?: string
    enterprieTell?: string
    shopHistory?: string
    shopIntroduction?: string
    shopLabel?: string
    shopLinkMan?: string
    shopLinkManTell?: string
    shopLogo?: string
    shopName?: string
    unifiedSocialCreditIdentifier?: string
}

const isLoading = ref<boolean>(false)
const form = ref<formType>({
    enterprieAbbreviation: '',
    enterprieIntroduction: '',
    enterprieName: '',
    enterprieTell: '',
    shopHistory: '',
    shopIntroduction: '',
    shopLabel: '',
    shopLinkMan: '',
    shopLinkManTell: '',
    shopLogo: '',
    shopName: '',
    unifiedSocialCreditIdentifier: '',
})
function updateForm(data: formType) {
    Object.assign(form.value, data)
    isLoading.value = false
}
const xmform = ref<any>({
    shopCover: '',
    shopTopMap: '',
})
const xmrules = {
    shopCover: [{ message: '品牌宣传图不能为空', required: false, trigger: 'blur' }],
    shopTopMap: [{ message: '品牌详情宣传图不能为空', required: true, trigger: 'blur' }],
}
onMounted(() => {
    if (route.query.id) {
        isLoading.value = true
        detailflage(route.query.id).then((res) => {
            updateForm(res.data as formType)
            xmform.value.shopCover = res.data.shopCover || ''
            xmform.value.shopTopMap = res.data.shopTopMap || ''
        })
    }
})
function onSubmit() {
    if (companyRef.value) {
        companyRef.value.validate((valid) => {
            if (valid) {
                const obj = { ...form.value, ...xmform.value }
                updataflageList(obj).then(() => {
                    ElMessage.success('修改成功')
                })
            }
        })
    }
}
</script>

<template>
    <el-skeleton v-if="isLoading" />

    <template v-else>
        <div class="title">
            品牌旗舰封面
            <p style="color: red; margin: 12px">
                图片大小不能超过5MB
            </p>
        </div>

        <el-form ref="companyRef"
                 :model="xmform"
                 :rules="xmrules"
                 label-width="150px"
        >
            <el-row>
                <el-col :span="10">
                    <el-form-item label="品牌宣传图:"
                                  prop="shopCover"
                    >
                        <FlUpload v-model="xmform.shopCover"
                                  :file-size="5"
                        />
                    </el-form-item>

                    <div class="f-tips">
                        * 建议尺寸：936X540
                    </div>
                </el-col>

                <el-col :span="10">
                    <el-form-item label="品牌详情宣传图:"
                                  prop="shopTopMap"
                    >
                        <FlUpload v-model="xmform.shopTopMap"
                                  :file-size="5"
                        />
                    </el-form-item>

                    <div class="f-tips">
                        * 建议尺寸：1125X606
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <el-row>
            <el-col :span="24">
                <el-button style="margin-left: 80%"
                           type="primary"
                           @click="onSubmit"
                >
                    保存
                </el-button>
            </el-col>
        </el-row>
    </template>
</template>
